{include file="public/header"}
<body>
<div id="app">
    <div class="ht-main">
        <div class="ht-search">
            <el-form :inline="true">
                <el-form-item label="名称" size="small">
                    <el-input size="small" placeholder="名称" v-model="title"></el-input>
                </el-form-item>

                <el-form-item size="small">
                    <el-button type="success" size="small" icon="el-icon-search" @click="search">搜索</el-button>
                    <el-button type="" size="small" icon="el-icon-refresh" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="ht-tool">
            <div class="ht-tool-left">
                <el-upload
                        class="upload-demo"
                        action="/admin/Uploadify/upload"
                        :on-success="uploadSuccess"
                        :show-file-list="false"
                        :multiple="true">
                    <el-button size="mini" ref="upload" type="success" icon="el-icon-upload2">上传</el-button>
                </el-upload>
                <el-button size="mini" @click="submit" :disabled="!select_list.length" type="primary" icon="el-icon-check">选择</el-button>
                <span style="color: #E6A23C;margin-left: 5px" >已经选择 {{select_list.length}}/{{count}} 个</span>
            </div>
            <div class="ht-tool-right"></div>
        </div>
        <div class="ht-main-body">
            <el-table :data="tableData" border :row-key="getRowKey" ref="table"
                      @select-all="selectAll" @row-click="rowClick"
                      @select="select" header-row-class-name="ht-table-header">
                <el-table-column
                        :reserve-selection="true"
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="类型" width="100px">
                    <template slot-scope="scope">
                        <ht-table-image :value="scope.row"></ht-table-image>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="名称"
                        width="280px">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="大小"
                        width="100px" :formatter="formatSize">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="path"
                        label="路径">
                </el-table-column>
            </el-table>
            <div class="ht-main-page">
                <el-pagination
                        @size-change="manageSizeChange"
                        @current-change="manageCurrentChange"
                        :current-page="managePage"
                        :page-sizes="[3,10, 200, 300, 400]"
                        :page-size="manageLimit"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="manageTotal">
                </el-pagination>
            </div>
        </div>

    </div>
</div>
{include file="public/common"}
<script>
    let vs
    new Vue({
        el:"#app",
        data() {
            return {
                count:1,
                dialogTableVisible:this.isshow,
                manageTotal:1,
                managePage:1,
                manageLimit:10,
                title:'',
                tableData:[],
                currentRow: null,
                select_list:[],
                key:'',
                data:''
            }
        },
        created() {
            vs = this
            console.log("imageManageCreate")
            vs.count = Helper.getPar('count')
            vs.key = Helper.getPar('key')
            vs.data = Helper.getPar('data')
            this.getManageData()
        },
        methods: {
            reset() {
                this.page = 1
                this.title = ''
                this.tableData = []
                this.getManageData()
            },
            getData() {
                this.getManageData()
            },
            del() {
            
            },
            uploadSuccess(response,file,fileList) {
                let that = this
                console.log(response,file,fileList)
                if (response.code === 1) {
                    this.getManageData()
                } else {
                    this.showErrorMsg(response.msg)
                }
            },
            submit(){
                let path = []
                if (this.select_list.length) {
                    this.select_list.forEach((item)=>{
                        path.push(item.path)
                    })
                }
                this.dialogTableVisible = false
                console.log(Helper.getPar('count'))
                console.log('Helper.getPar(\'callback\')',Helper.getPar('callback'))
                console.log(parent.vm)
                parent.vm[Helper.getPar('callback')](path,vs.data,vs.key,vs.count)
            },
            selectAll(v) {
                if (v.length > this.count) {
                    this.showErrorMsg('只能选择' + this.count + "张")
                    this.$refs.table.clearSelection()
                    this.select_list.map((item)=>{
                        this.$refs.table.toggleRowSelection(item,true)
                    })
                } else {
                    this.select_list = JSON.parse(JSON.stringify(v));
                }
                console.log('selectAll',this.select_list)
            },
            select(v,row) {
                this.select_list = v
                console.log("v",v)
                console.log("row",row)
                if (this.select_list.length > this.count) {
                    this.select_list.splice(0,1)
                }
                if (this.select_list.length) {
                    this.$refs.table.clearSelection()
                    this.select_list.map((item)=>{
                        this.$refs.table.toggleRowSelection(item,true)
                    })
                }
                console.log('select_list',this.select_list)
            },
            rowClick(row) {
                this.$refs.table.toggleRowSelection(row)
                this.select_list  = this.$refs.table.selection
                if (this.select_list.length > this.count) {
                    this.select_list.splice(0,1)
                    this.$refs.table.clearSelection()
                    this.select_list.map((item)=>{
                        this.$refs.table.toggleRowSelection(item,true)
                    })
                }
            },
            formatSize(row) {
                var fileSizeByte = row.size;
                var fileSizeMsg = "";
                if (fileSizeByte < 1048576) fileSizeMsg = (fileSizeByte / 1024).toFixed(2) + "KB";
                else if (fileSizeByte == 1048576) fileSizeMsg = "1MB";
                else if (fileSizeByte > 1048576 && fileSizeByte < 1073741824) fileSizeMsg = (fileSizeByte / (1024 * 1024)).toFixed(2) + "MB";
                else if (fileSizeByte > 1048576 && fileSizeByte == 1073741824) fileSizeMsg = "1GB";
                else if (fileSizeByte > 1073741824 && fileSizeByte < 1099511627776) fileSizeMsg = (fileSizeByte / (1024 * 1024 * 1024)).toFixed(2) + "GB";
                else fileSizeMsg = "文件超过1TB";
                return fileSizeMsg;
            },
            getRowKey(row) {
                return row.id
            },
            getManageData:function() {
                var that = this
                axios.post('/admin/uploadify/attachment',{
                    limit:that.manageLimit,
                    page:that.managePage,
                    type:that.type,
                    title:that.title
                }).then((res)=>{
                    console.log(res.data)
                    that.tableData = res.data.data.data
                    that.manageTotal = res.data.data.total
                })
            },
            close(){
                this.dialogTableVisible = false
                this.select_list = []
                this.$emit('close')
            },
            manageSizeChange:function(e) {
                this.manageLimit = e
            },
            manageCurrentChange:function(e) {
                this.managePage = e
            }
        },
        watch: {
            isshow(v) {
                this.dialogTableVisible = v
                console.log('child',v)
            },
            managePage(v) {
                this.getManageData()
            },
            manageLimit() {
                this.getManageData()
            }
        }
    })
</script>
</body>
</html>
